<script setup lang="ts">

import {useUserStore} from "@/common/user_store.ts";
import {ref, watchEffect} from "vue";

const store = useUserStore();

const score = ref(store.score);
watchEffect(() => {
  store.$patch({
    score: score.value,
  });
});

const times=ref(1);

</script>

<template>
  <el-card class="mb-4">
    <template #header>pinia getter</template>
    <el-input v-model="score" style="width: 200px;height: 40px;" />

    <p>score: {{ store.score }}</p>
    <p>double getter: {{ store.doubleScore }}</p>
    <p>double+1 getter: {{ store.doubleAddOne }}</p>

  </el-card>

  <el-card>
    <template #header>Getter参数</template>
    <el-space>
      得分：
      <el-input v-model="score" style="width: 200px;height: 40px;" />
      倍数：
      <el-input v-model="times" style="width: 200px;height: 40px;" />
    </el-space>

    <p>{{times}}倍积分: {{store.times(times)}}</p>
  </el-card>

  <el-card>
    <template #header>访问其他 store 的 getter</template>
    <p> <el-avatar :src="store.avatar" size="large" shape="circle"  />  </p>
    <pre>
import {useMemberStore} from "@/common/member.ts";
........
avatar(state: State): string {
      const member = useMemberStore();
      return member.headerImg;
}
    </pre>
  </el-card>

</template>

<style scoped>

</style>